<template>
  <div>
    <project-header-top></project-header-top>
    <div class="choose">
      <div class="choose-input">
        <span>Show me
          <el-button class="all">All</el-button>
        </span>
        <span>projects on
          <el-button class="earth" >Earth</el-button>
        </span>
        <span>that are
          <el-button class="love">Projects We Love</el-button>
        </span>
        <span>sorted by
          <el-button class="magic">Magic</el-button>
        </span>
      </div>
      <span class="choose-more"><a href="javascript:(viod)">More filters</a></span>
    </div>
    <div class="explore">
      <div class="explore-title">
        Explore
        <span>36,490 projects</span>
      </div>
      <div class="explore-box" v-for="item in boxNum">
        <div class="box-top">
          <button>Project We Love</button>
        </div>
        <div class="box-text">
          <span class="box-title">Mycroft Mark II: The Open Voicstic horror game</span>
          <span class="box-by">by PlayWay</span>
          <el-progress :percentage="77" status="text" :stroke-width=2 color="#317162"></el-progress>
          <span class="box-pledged">CA$ 18,541 pledged</span>
          <span class="box-fund">696% funded</span>
          <span class="box-hour">36 hours to go</span>
          <span class="box-hardware"><a href="javascript:(viod)">Hardware</a></span>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <button class="load">Load more</button>
  </div>
</template>

<script>
  import projectHeaderTop from '../publicCom/ProjectHeaderTop'
    export default {
        name: "projects-list",
        components:{ projectHeaderTop },
        data(){
          return{
            boxNum:[ '', '', '', '', '', '', ]
          }
        }
    }
</script>

<style scoped lang="scss">
  .clear{clear: both}
.choose{
  padding: 73px 0 29px 206px;
  border-bottom: 1px solid #dbdedd;
  box-shadow: 0 -1px 0 0 rgba(0,0,0,0.50);
  .choose-input{
    span{
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #2E2E2E;
      letter-spacing: 0.6px;
      margin-right: 13px;
      .el-button{height: 80px}
      .all{width: 92px;}
      .earth{width: 116px}
      .love{width:210px}
      .magic{width:123px}
    }
  }
  .choose-more{
    display: block;
    margin-top: 55px;
    font-family: ArialMT;
    font-size: 14px;
    letter-spacing: 0.2px;
    a{color: #2E2E2E;}
  }
}
  .explore{
    padding: 57px 0 0 0px;
    margin-left: 98px;
    width: 1290px;

    .explore-title{
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #2E2E2E;
      letter-spacing: 1px;
      margin-bottom: 40px;
      span{
        font-family: Arial-BoldMT;
        font-size: 24px;
        color: #459A75;
        letter-spacing: -0.2px;
      }
    }
    .explore-box{
      float: left;
      border: 1px solid #DBDEDD;
      margin:0 37px 38px 0;
      .box-top{
        width: 390px;
        height: 220px;
        background: #D8D8D8;
        position: relative;
        button{
          width: 120px;
          height: 33px;
          background: #FFFFFF;
          border: 1px solid #DBDEDD;
          position: absolute;
          bottom:-16px;
          left:20px;
          outline: none;
          /*&:active{*/
            /*background-color: black;*/
            /*color:#ffffff;*/
          /*}*/
        }
      }
      .box-text{
        padding-left:20px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        letter-spacing: 0.6px;
        color: #666666;
        font-size: 12px;
        span{display: block}
        span:nth-child(1){
          margin: 29px 0 22px 0;
          font-size: 18px;
          color: #2E2E2E;
          letter-spacing: -0.2px;
          line-height: 28px;
          width: 348px;
        }
        span:nth-child(2){
          font-size: 14px;
          color: #2E2E2E;
          letter-spacing: -0.8px;
        }
        .el-progress{
          width:347px;
          margin: 42px 0 22px 0;
        }
        .box-pledged{
          color: #317162;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #317162;
          letter-spacing: 0.6px;
        }
        .box-fund{
          margin: 4px 0;
          color: #666666;
        }
        .box-hardware{
          margin: 26px 0 38px 0;
          color: #666666;
          font-size: 12px;
          a{color: #666666;}
        }
      }
    }
  }
  .load{
    width: 110px;
    height: 50px;
    display: block;
    background: #459B76;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 auto;
    margin-top: 27px;
    margin-bottom: 55px;
    outline: none;
    border: none;
  }


</style>
